<!-- 倒计时 -->
<template>
    <div class="box" :style="{'width': width+'px','height': width+'px'}">
        <!-- 使用element圆圈进度条实现 -->
        <el-progress :stroke-width="20" :width="width" type="circle" :percentage="percentage" :color="colors" class="progress" :format="format" text-color="#34bfa3"/>
    </div>
</template>

<script>
import {secondFormat} from "@/utils/zzDouUtils/dateUtil"

export default {
    name: "count_down",
    props:{
        width:{
            type: Number,
            default: 180
        }
    },
    watch: {
        value(n, o) {
            this.clearTimer();
            this.resetSecond();
        },
        second(n, o) {
            this.secondStr = secondFormat(n);
            //计算圆环百分比
            this.percentage = (n / this.secondFlag).toFixed(2) * 100;
            if (n <= 0) {
                this.clearTimer();
            }
        }
    },
    data() {
        return {
            value: 0,
            second: 0,//当前秒数（每秒更新）
            secondFlag: 0,//记录秒数（不更新），用作计算百分比
            percentage: 100,//百分比
            colors: [//百分比颜色
                {color: '#67C23A', percentage: 100},
                {color: '#409EFF', percentage: 75},
                {color: '#E6A23C', percentage: 50},
                {color: '#F56C6C', percentage: 25},
            ],
            timer: null,//定时器
        };
    },
    created() {
        this.resetSecond();
    },
    methods: {
        /** 重置秒数 */
        resetSecond() {
            this.second = this.value;
            this.secondFlag = this.value;
            this.clearTimer();
        },
        /** 开启定时器 */
        openTimer() {
            this.clearTimer();
            this.timer = setInterval(() => {
                if (this.second > 0) this.second--
            }, 1000);
        },
        /** 清空定时器 */
        clearTimer() {
            if (this.timer != null) {
                clearInterval(this.timer);
            }
        },
        /** 格式化 */
        format() {
            return secondFormat(this.second);
        }
    }
}
</script>
<style>
.el-progress__text {
    font-size: 35px !important;
    font-weight: bold;
}

</style>
